<template>
  <div class="rich-editor">
    <textarea v-model="content" rows="10" placeholder="请输入正文内容..." />
    <div class="editor-actions">
      <button @click="submit">提交</button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:modelValue', 'submit'])

const content = ref(props.modelValue)

watch(() => props.modelValue, (val) => {
  content.value = val
})

watch(content, (val) => {
  emit('update:modelValue', val)
})

function submit() {
  emit('submit')
}
</script>

<style scoped>
.rich-editor {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px #e3e3e3;
  padding: 24px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
textarea {
  width: 100%;
  min-height: 120px;
  font-size: 16px;
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  padding: 12px;
  resize: vertical;
  background: #f9f9ff;
  transition: border 0.2s;
}
textarea:focus {
  border-color: #409eff;
  background: #fff;
}
.editor-actions {
  display: flex;
  justify-content: flex-end;
}
</style> 